import 'package:flutter/material.dart';

// stack层叠布局，可以理解为定位的一种
/** 
 * 层叠布局的 alignment 属性
 *    alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。
 * 
 * 
 * CircleAvatar组件的使用
 *    CircleAvatar这个经常用来作头像的，组件里边有个radius的值可以设置图片的弧度。
 * 
 * 
 * */ 

void main()=>runApp(myApp());

class myApp extends StatelessWidget{
  @override

  Widget build(BuildContext context){

    // 组件的另外一种，不通过类
    var stack = new Stack(
      alignment: FractionalOffset(0.3, 0.2),  //X 和 Y轴的值是0 -1 从左上角开始计算
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
          radius: 100,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(20),
          child: new Text('我是大飞'),
        )
      ],
    );

    return MaterialApp(
      home:Scaffold(
        appBar: new AppBar(
          title: new Text('stack层叠布局'),
        ),
        // body:stack, //默认
        body:Center(child: stack,)
      )
    );
  }
}